<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Inventory Count Dashboard</title>
    <!-- Load Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Load Font Awesome for Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* Custom scrollbar for a cleaner look */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #64748b; /* slate-500 */
            border-radius: 4px;
        }
        ::-webkit-scrollbar-track {
            background-color: #f1f5f9; /* slate-100 */
        }
        /* Ensure the main layout is full height */
        html, body, #app {
            height: 100%;
        }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // Updated primary color for a more refined look
                        'primary-indigo': '#4f46e5', /* Indigo-600 */
                        'secondary-slate': '#475569', /* Slate-600 */
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
                        'xl': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }

        // --- Mock Data (Based on PHP variables) ---
        const MOCK_DATA = {
            totalItems: 8500,
            activeSessions: 3,
            totalItemsAssigned: 4200,
            pendingCounts: 15,
            itemsCounted: 3850,
            totalVariance: 125.75,
            totalItemsNotCounted: 350,
            userName: "Jane Doe",
            userRole: "admin",
            appName: "PAB Inventory Count System",
            logoUrl: "https://placehold.co/40x40/4f46e5/ffffff?text=PAB"
        };

        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            sidebar.classList.toggle('translate-x-0');
            mainContent.classList.toggle('lg:ml-64');
        }

        function loadMockData() {
            document.getElementById('appName').textContent = MOCK_DATA.appName;
            document.getElementById('logoImg').src = MOCK_DATA.logoUrl;
            document.getElementById('welcomeUser').textContent = MOCK_DATA.userName; // Set welcome name
            document.getElementById('userInfo').textContent = `${MOCK_DATA.userName} (${MOCK_DATA.userRole})`;

            document.getElementById('totalItems').textContent = MOCK_DATA.totalItems.toLocaleString();
            document.getElementById('activeSessions').textContent = MOCK_DATA.activeSessions;
            document.getElementById('assignedItems').textContent = MOCK_DATA.totalItemsAssigned.toLocaleString();
            document.getElementById('pendingCounts').textContent = MOCK_DATA.pendingCounts;
            document.getElementById('completedCounts').textContent = MOCK_DATA.itemsCounted.toLocaleString();
            document.getElementById('totalVariance').textContent = MOCK_DATA.totalVariance.toLocaleString(undefined, { minimumFractionDigits: 2 });
            document.getElementById('notCounted').textContent = MOCK_DATA.totalItemsNotCounted.toLocaleString();
        }

        window.onload = loadMockData;
    </script>
</head>
<body class="bg-gray-100 font-sans antialiased">

    <div id="app" class="flex h-full w-full">

        <!-- Sidebar (Dark & Elegant) -->
        <aside id="sidebar" class="fixed z-30 transform -translate-x-full lg:translate-x-0 lg:relative w-64 h-full bg-gray-900 text-white transition-transform duration-300 ease-in-out shadow-2xl flex flex-col">
            <!-- Sidebar Header/Logo -->
            <div class="p-5 flex items-center justify-center h-16 bg-gray-900 border-b border-gray-700">
                <img id="logoImg" alt="Logo" class="w-8 h-8 rounded-lg mr-3 shadow-md">
                <span class="text-xl font-extrabold tracking-widest text-white" id="appName"></span>
            </div>

            <!-- Navigation Menu -->
            <ul class="nav-menu flex-grow p-4 space-y-2">
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg bg-primary-indigo text-white font-semibold shadow-md shadow-indigo-700/50 transition duration-200">
                    <i class="fas fa-tachometer-alt w-5 mr-3"></i> Dashboard
                </a></li>
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition duration-200">
                    <i class="fas fa-boxes w-5 mr-3"></i> Inventory
                </a></li>
                <!-- Conditional for 'counter' or 'admin' -->
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition duration-200">
                    <i class="fas fa-calculator w-5 mr-3"></i> Counting
                </a></li>
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition duration-200">
                    <i class="fas fa-book w-5 mr-3"></i> Counting Instructions
                </a></li>
                <!-- Conditional for 'checker' or 'admin' -->
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition duration-200">
                    <i class="fas fa-check-circle w-5 mr-3"></i> Checking
                </a></li>
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition duration-200">
                    <i class="fas fa-book w-5 mr-3"></i> Checking Guidelines
                </a></li>
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition duration-200">
                    <i class="fas fa-chart-bar w-5 mr-3"></i> Reports
                </a></li>
                <!-- Conditional for 'admin' -->
                <li><a href="#" class="nav-link flex items-center p-3 rounded-lg text-gray-300 hover:bg-gray-800 hover:text-white transition duration-200">
                    <i class="fas fa-cog w-5 mr-3"></i> Administration
                </a></li>
            </ul>

            <!-- Sidebar Footer/Logout -->
            <div class="p-4 border-t border-gray-700">
                <a href="#" class="nav-link flex items-center p-3 rounded-lg text-red-400 hover:bg-red-700 hover:text-white transition duration-200">
                    <i class="fas fa-sign-out-alt w-5 mr-3"></i> Logout
                </a>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main id="mainContent" class="flex-grow overflow-y-auto transition-all duration-300 ease-in-out p-4 md:p-8 lg:ml-64">
            <!-- Navbar (Sticky & Clean) -->
            <nav class="sticky top-0 z-20 bg-white py-4 mb-8 shadow-xl rounded-2xl flex justify-between items-center px-6 md:px-8">
                <button class="text-gray-700 lg:hidden p-2 rounded-lg hover:bg-gray-200" onclick="toggleSidebar()">
                    <i class="fas fa-bars text-xl"></i>
                </button>
                <div class="flex-grow"></div>
                <div class="nav-user flex items-center space-x-4">
                    <span id="userInfo" class="text-sm font-semibold text-gray-700 hidden sm:block"></span>
                    <a href="#" class="flex items-center text-red-600 hover:text-red-800 transition duration-150 p-2 rounded-full hover:bg-red-50">
                         <i class="fas fa-sign-out-alt text-lg"></i>
                    </a>
                </div>
            </nav>

            <!-- Dashboard Page -->
            <div id="dashboardPage" class="space-y-10">
                
                <!-- Page Header & Quick Stat -->
                <div class="page-header flex justify-between items-start flex-col sm:flex-row sm:items-center">
                    <div>
                        <h1 class="text-4xl font-extrabold text-gray-900 flex items-center">
                            <i class="fas fa-tachometer-alt mr-3 text-primary-indigo"></i> Dashboard Overview
                        </h1>
                        <p class="mt-2 text-gray-600 text-lg">Welcome back, <span class="font-extrabold text-primary-indigo" id="welcomeUser"></span>! Here's your real-time inventory count status.</p>
                    </div>
                    <!-- Quick Stat in Header (Enhanced) -->
                    <div class="mt-6 sm:mt-0 bg-primary-indigo text-white p-6 rounded-2xl shadow-2xl flex flex-col items-center min-w-[200px] hover:scale-[1.05] transition duration-300 cursor-pointer transform hover:rotate-1">
                        <span class="text-sm font-medium opacity-80 uppercase tracking-wider">Active Sessions</span>
                        <span class="text-5xl font-extrabold mt-1" id="activeSessions">3</span>
                    </div>
                </div>
                
                <!-- Stats Grid (Premium Cards) -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                    
                    <!-- Total Items (Indigo) -->
                    <div class="stat-card bg-white p-6 rounded-xl shadow-2xl border border-gray-200 hover:ring-4 ring-indigo-100 transition duration-300 cursor-pointer transform hover:-translate-y-1">
                        <div class="flex items-center justify-between">
                            <div class="stat-content">
                                <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Items</p>
                                <h3 id="totalItems" class="text-3xl font-extrabold text-gray-900 mt-2">8,500</h3>
                            </div>
                            <div class="stat-icon p-4 bg-indigo-500 text-white rounded-full shadow-lg shadow-indigo-500/50">
                                <i class="fas fa-boxes text-2xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Items Assigned (Emerald) -->
                    <div class="stat-card bg-white p-6 rounded-xl shadow-2xl border border-gray-200 hover:ring-4 ring-emerald-100 transition duration-300 cursor-pointer transform hover:-translate-y-1">
                        <div class="flex items-center justify-between">
                            <div class="stat-content">
                                <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Items Assigned</p>
                                <h3 id="assignedItems" class="text-3xl font-extrabold text-gray-900 mt-2">4,200</h3>
                            </div>
                            <div class="stat-icon p-4 bg-emerald-500 text-white rounded-full shadow-lg shadow-emerald-500/50">
                                <i class="fas fa-tasks text-2xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Pending Review (Amber) -->
                    <div class="stat-card bg-white p-6 rounded-xl shadow-2xl border border-gray-200 hover:ring-4 ring-amber-100 transition duration-300 cursor-pointer transform hover:-translate-y-1">
                        <div class="flex items-center justify-between">
                            <div class="stat-content">
                                <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Pending Review</p>
                                <h3 id="pendingCounts" class="text-3xl font-extrabold text-gray-900 mt-2">15</h3>
                            </div>
                            <div class="stat-icon p-4 bg-amber-500 text-white rounded-full shadow-lg shadow-amber-500/50">
                                <i class="fas fa-clock text-2xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Counts Completed (Green) -->
                    <div class="stat-card bg-white p-6 rounded-xl shadow-2xl border border-gray-200 hover:ring-4 ring-green-100 transition duration-300 cursor-pointer transform hover:-translate-y-1">
                        <div class="flex items-center justify-between">
                            <div class="stat-content">
                                <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Counts Completed</p>
                                <h3 id="completedCounts" class="text-3xl font-extrabold text-gray-900 mt-2">3,850</h3>
                            </div>
                            <div class="stat-icon p-4 bg-green-500 text-white rounded-full shadow-lg shadow-green-500/50">
                                <i class="fas fa-check-circle text-2xl"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Total Variance (Rose/Red) -->
                    <div class="stat-card bg-white p-6 rounded-xl shadow-2xl border border-gray-200 hover:ring-4 ring-rose-100 transition duration-300 cursor-pointer transform hover:-translate-y-1">
                        <div class="flex items-center justify-between">
                            <div class="stat-content">
                                <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Total Variance</p>
                                <h3 id="totalVariance" class="text-3xl font-extrabold text-gray-900 mt-2">125.75</h3>
                            </div>
                            <div class="stat-icon p-4 bg-rose-500 text-white rounded-full shadow-lg shadow-rose-500/50">
                                <i class="fas fa-exclamation-triangle text-2xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Items Not Counted (Slate) -->
                    <div class="stat-card bg-white p-6 rounded-xl shadow-2xl border border-gray-200 hover:ring-4 ring-slate-100 transition duration-300 cursor-pointer transform hover:-translate-y-1">
                        <div class="flex items-center justify-between">
                            <div class="stat-content">
                                <p class="text-sm font-medium text-gray-500 uppercase tracking-wider">Items Not Counted</p>
                                <h3 id="notCounted" class="text-3xl font-extrabold text-gray-900 mt-2">350</h3>
                            </div>
                            <div class="stat-icon p-4 bg-slate-500 text-white rounded-full shadow-lg shadow-slate-500/50">
                                <i class="fas fa-times text-2xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Activity Section (Timeline/Log Style) -->
                <div class="recent-activity bg-white p-6 rounded-2xl shadow-2xl border border-gray-200">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                        <i class="fas fa-history mr-3 text-secondary-slate"></i> System Activity Log
                    </h2>
                    <div class="activity-list space-y-4">
                        <!-- Activity Item Template -->
                        <div class="activity-item flex items-start p-4 bg-gray-50 rounded-lg shadow-sm hover:bg-gray-100 transition duration-150 border-l-4 border-indigo-500">
                            <div class="activity-icon p-3 bg-indigo-100 text-indigo-600 rounded-full mr-4 mt-0.5 flex-shrink-0">
                                <i class="fas fa-user-shield text-lg"></i>
                            </div>
                            <div class="activity-content flex-grow flex justify-between items-center">
                                <p class="font-medium text-gray-800">User <span class="font-extrabold">Jane Doe</span> signed in and accessed the Administration Panel.</p>
                                <span class="activity-time text-xs text-gray-500 font-semibold flex-shrink-0 ml-4">Just now</span>
                            </div>
                        </div>
                        <div class="activity-item flex items-start p-4 bg-gray-50 rounded-lg shadow-sm hover:bg-gray-100 transition duration-150 border-l-4 border-emerald-500">
                            <div class="activity-icon p-3 bg-emerald-100 text-emerald-600 rounded-full mr-4 mt-0.5 flex-shrink-0">
                                <i class="fas fa-check text-lg"></i>
                            </div>
                            <div class="activity-content flex-grow flex justify-between items-center">
                                <p class="font-medium text-gray-800">Count <span class="font-mono bg-emerald-50 text-emerald-700 px-1.5 py-0.5 rounded text-sm">#8902</span> for item <span class="font-mono bg-emerald-50 text-emerald-700 px-1.5 py-0.5 rounded text-sm">X1234</span> was approved by a checker.</p>
                                <span class="activity-time text-xs text-gray-500 font-semibold flex-shrink-0 ml-4">5 minutes ago</span>
                            </div>
                        </div>
                        <div class="activity-item flex items-start p-4 bg-gray-50 rounded-lg shadow-sm hover:bg-gray-100 transition duration-150 border-l-4 border-amber-500">
                            <div class="activity-icon p-3 bg-amber-100 text-amber-600 rounded-full mr-4 mt-0.5 flex-shrink-0">
                                <i class="fas fa-exclamation-circle text-lg"></i>
                            </div>
                            <div class="activity-content flex-grow flex justify-between items-center">
                                <p class="font-medium text-gray-800">New count session <span class="font-mono bg-amber-50 text-amber-700 px-1.5 py-0.5 rounded text-sm">Q4-2024-WEST</span> has been started by a manager.</p>
                                <span class="activity-time text-xs text-gray-500 font-semibold flex-shrink-0 ml-4">1 hour ago</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Spacer to push content up on scroll -->
                <div class="h-10"></div>
            </div>
        </main>
    </div>

</body>
</html>